<template>
  <view class="content" :class="'theme-'+theme">
    <view class="addTitle">
      <view class="titleDetail">
        <view class="titleLeft" > 
			<image src="../../static/newh5/fanhui.png" 
			class="yticon" 
			style="width: 13px;height: 20px;color:black" 
			@click="returnIndex()"
			></image>
        </view>
        <view class="titleCenter" >
          <b class="titleText">旧商品发货</b>
        </view>
        <view class="titleRight"  style="color: #269cd3;flex:1" > </view>
      </view>
    </view>
    <view>
<!--    <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">-->
      <!-- 空白页 -->
<!--      <empty v-if="afterSaleList.length === 0"></empty>-->
<!--      <view  :key="index">-->
        <view class="order-item" @click="toDetail(afterSaleList)">
          <view class="i-top">
<!--            <image class="img" src="../../static/store.png" mode="aspectFill"></image>-->
            <text class="time">发货商品</text>
<!--            <u-image v-if="afterSaleList.productLogo != undefined && afterSaleList.productLogo != ''" :src="afterSaleList.productLogo" width="128rpx" height="52rpx"></u-image>-->
<!--            <text class="yticon icon-shouhoutuikuan"></text>-->
<!--            <text class="state" v-if="afterSaleList.type==='1'">退货</text>-->
<!--            <text class="state" v-else>换货</text>-->
          </view>
          <view class="goods-box-single">
            <image class="goods-img" :src="afterSaleList.productThumbnail" mode="aspectFill"></image>
            <view class="right">
              <text class="title clamp">{{afterSaleList.productName}}</text>
              <text class="attr-box"><text class="price">{{afterSaleList.price| twoBitMoney}}</text>  <text style="float: right">发货数量: {{afterSaleList.num}}</text></text>

            </view>
          </view>

<!--          <view style="display: flex;justify-content: space-between">
            <view style="padding: 20upx 0upx;">{{afterSaleList.createTime}}</view>
            <view class="price-box" v-if="afterSaleList.type==='1'">
              {{dataDictMap.SALE_AFTER_STATUS[afterSaleList.status]}}
              &lt;!&ndash;              {{afterSaleList.status}}&ndash;&gt;
              &lt;!&ndash;                  提交失败&ndash;&gt;
              <view v-if="afterSaleList.status=='10'&&afterSaleList.delivered">
                (已妥投)
              </view>
              <view
                  v-if="afterSaleList.completeRemark && afterSaleList.completeRemark.indexOf('供应商完成（完成消息）')>-1">
                (供应商完成)
              </view>
              &lt;!&ndash;              共&ndash;&gt;
              &lt;!&ndash;              <text class="num">{{afterSaleList.num}}</text>&ndash;&gt;
              &lt;!&ndash;              件商品 退款&ndash;&gt;
              &lt;!&ndash;              <text class="price">{{afterSaleList.price*afterSaleList.num | twoBitMoney}}</text>&ndash;&gt;
            </view>
            <view class="price-box" v-if="afterSaleList.type==='2'">
              {{dataDictMap.SALE_AFTER_STATUS[afterSaleList.status]}}
              &lt;!&ndash;              {{afterSaleList.delivered}}&ndash;&gt;
              &lt;!&ndash;              提交失败&ndash;&gt;
              <view v-if="afterSaleList.status=='10'&&afterSaleList.delivered">
                (已妥投)
              </view>
              <view
                  v-if="afterSaleList.completeRemark && afterSaleList.completeRemark.indexOf('供应商完成（完成消息）')>-1">
                (供应商完成)
              </view>
              &lt;!&ndash;              共&ndash;&gt;
              &lt;!&ndash;              <text class="num">{{afterSaleList.num}}</text>&ndash;&gt;
              &lt;!&ndash;              件商品 退款&ndash;&gt;
              &lt;!&ndash;              <text class="price">{{afterSaleList.price*afterSaleList.num | twoBitMoney}}</text>&ndash;&gt;
            </view>
          </view>

          <view class="action-box b-t">
            &lt;!&ndash;						<text class="time-text">{{afterSaleList.createTime}}</text>&ndash;&gt;
            <button class="action-btn" v-if="afterSaleList.status==='3'" @click.stop="logisticsPopupShow(afterSaleList.sn,afterSaleList.id)">发货</button>
            <div v-if="afterSaleList.status ==='9'||afterSaleList.status==='10'">
              <button class="action-btn" v-if="afterSaleList.deliveryType !==''" @click.stop="getLogs(afterSaleList)">查看物流</button>
              <button class="action-btn" @click.stop="beforeConfirm(afterSaleList)">确认收货</button>
            </div>
            <button class="action-btn" v-if="afterSaleList.status==='1'" @click.stop="openPopup(afterSaleList,'cancel')">取消</button>
            <button class="action-btn recom" @click.stop="toDetail(afterSaleList)">查看</button>
          </view>-->
        </view>
<!--      </view>-->
<!--      <uni-load-more style="background-color: #fff;" :status="loadingType"></uni-load-more>-->
<!--    </scroll-view>-->
    </view>

    <view>
    <view class="order-item">
      <view class="i-top ">
        <!--            <image class="img" src="../../static/store.png" mode="aspectFill"></image>-->
        <text class="time">物流信息</text>

<!--                    <u-image v-if="afterSaleList.productLogo != undefined && afterSaleList.productLogo != ''" :src="afterSaleList.productLogo" width="128rpx" height="52rpx"></u-image>-->
<!--                    <text class="yticon icon-shouhoutuikuan"></text>-->
<!--                    <text class="state" v-if="afterSaleList.type==='1'">退货</text>-->
<!--                    <text class="state" v-else>换货</text>-->
      </view>
      <view class="goods-box-logistic">
        <view style="display: flex;margin: 10px">
          <easy-select style="margin: auto" ref="easySelect" size="medium" :options="logisticsCompanyList" :value="selectLogisticsCompany"  @selectOne="selectOne"></easy-select>
        </view>
        <!--              <u-picker mode="selector" :range="logisticsCompanyList"  @change="bindTimeChange"></u-picker>-->
        <!--            </u-form-item>-->
        <!--            <u-form-item label-position="left" label-width="150" label="" prop="logisticsNumber" style="align-items: center">-->
        <view style="display: flex;margin: 10px">
          <view style="width: 240px;margin: auto">
          <u-input type="text" style="width: 240px;height: 40px" :border="true" v-model="logisticsModel.logisticsNumber" maxlength="50" placeholder="请输入物流单号"></u-input>
          </view>
        </view>
<!--        <image class="goods-img" :src="afterSaleList.productThumbnail" mode="aspectFill"></image>-->
<!--        <view class="right">-->
<!--          <text class="title clamp">{{afterSaleList.productName}}</text>-->
<!--          <text class="attr-box"><text class="price">{{afterSaleList.price| twoBitMoney}}</text>  <text style="float: right">发货数量: {{afterSaleList.num}}</text></text>-->

<!--        </view>-->
        <view>
<!--          <u-form :model="logisticsModel" :rules="rules" ref="uForm" :errorType="errorType">-->
<!--            <u-form-item label-position="left" label-width="150" label="" prop="logisticsName">-->
<!--              <u-radio-group v-model="logisticsModel.logisticsName" width="auto" :wrap="false">-->
<!--                <u-radio active-color="#fa436a" shape="circle" v-for="(item, index) in logisticsCompanyList" :key="index" :name="item.code">{{ item.name }}</u-radio>-->
<!--              </u-radio-group>-->

<!--            </u-form-item>-->
<!--          </u-form>-->
        </view>

      </view>
    </view>
      <u-button class="action-section" @click="onLogisticsSubmit">提交</u-button>
    </view>
<!--    <uni-popup ref="showcancel" :type="type" :mask-click="false">
      <view class="uni-tip">
        <text class="uni-tip-title">取消售后单</text>
        <view class="popup-content uni-tip-content">
          <view class="order-info">售后单id：{{curOrder.id}}</view>
          <textarea class="cancel-reason" placeholder-class="ph" placeholder="请输入取消原因" v-model="cancelReason" />
        </view>
        <view class="uni-tip-group-button">
          <text class="uni-tip-button" @click="close("cancel')">取消</text>
          <text class="uni-tip-button confirm" @click="cancelOrder()">确定</text>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="showconfirm" :type="type" :mask-click="false">
      <view class="uni-tip">
        <text class="uni-tip-title">提示</text>
        <text class="uni-tip-content">请确认是否已收到货？</text>
        <view class="uni-tip-group-button">
          <text class="uni-tip-button" @click="close('confirm')">取消</text>
          <text class="uni-tip-button confirm" @click="confirmReceive()">确定</text>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="showlog" :type="type" :mask-click="false">
      <view class="uni-tip">
        <text class="uni-tip-title" style="margin-bottom: 0;">发货信息</text>
        <view class="uni-tip-content log-content" style="padding-bottom: 0;">
          <view class="tabs">
            <view class="tab-item" @click="logTabIndex=index" :class="{current: logTabIndex === index}" v-for="(item,index) in logisticsList">
              物流{{index+1}}
            </view>
          </view>
          <swiper :current="logTabIndex" class="swiper-area" duration="300" @change="changeLogTab">
            <swiper-item class="s-item">
              <scroll-view scroll-y style="height: 100%;"  v-for="(item,index) in logisticsList" :key="index">
                <view class="c-line">发货方式：{{dataDictMap.DELIVERY_TYPE[item.deliveryType]}}</view>
                <view class="p-line">
                  <view class="left-side">发货商品：</view>
                  <view class="right-side">
                    <view class="right-item">
                      <text>{{item.productName}} x {{item.num}}</text>
                    </view>
                  </view>
                </view>
                <view class="c-line" v-if="item.deliveryType==='1'">物流公司：{{item.expressCompanyName}}</view>
                <view class="c-line" v-if="item.deliveryType==='1'">物流单号：{{item.expressCode}}</view>
                <view class="p-line" v-if="item.deliveryType==='1'&&item.trackList.length>0">
                  <view class="left-side">物流详情：</view>
                  <view class="track-list">
                    <view class="track-item" v-for="(track,tIndex) in item.trackList">
                    </view>
                  </view>
                </view>
                <view @click="clickConfirm(item)" class="btn" v-if="item.isConfirmReceipt==='0'">确认收货</view>
              </scroll-view>
            </swiper-item>
          </swiper>
        </view>
        <view class="uni-tip-group-button">
          <text class="uni-tip-button" @click="close('log')">关闭</text>
        </view>
      </view>
    </uni-popup>

    &lt;!&ndash;发货弹窗&ndash;&gt;
    <u-popup border-radius="10" v-model="logisticsShow"
             mode="center" :mask="true" width="90%"
             :closeable="true">
      <view class="budget-title">发货</view>
      <swiper class="product-box" current="0" @transition="transition">
        <swiper-item class="swiper-item">
          <view class="order">
            <view class="item">
              &lt;!&ndash;              @error="item.productThumbnail = errorImgUrl" &ndash;&gt;
              <view class="left"><image :src="logistics.productThumbnail" mode="aspectFill"></image></view>
              <view class="content">
                <view class="title u-line-3">{{logistics.productName}}</view>
              </view>
              <view class="right">
                <view class="price">
                  ￥{{logistics.price|money}}
                </view>
                <view class="number">x{{logistics.totalNum}}</view>
              </view>
            </view>
            <view class="totalPrice">
              <view class="combine">小计:<view style="color: #fa436a;display: inline">￥{{ logistics.price * logistics.totalNum|money }}</view></view>
              <view class="uni-num-box">
                <view>退换货数量：<view style="display: inline;font-size: 32rpx;font-weight: bold">X{{ logistics.num }}</view></view>
              </view>
            </view>
          </view>
          <u-form :model="logisticsModel" :rules="rules" ref="uForm" :errorType="errorType">
            <u-form-item label-position="left" label-width="150" label="物流公司" prop="logisticsName">
              <u-radio-group v-model="logisticsModel.logisticsName" width="auto" :wrap="false">
                <u-radio active-color="#fa436a" shape="circle" v-for="(item, index) in logisticsCompanyList" :key="index" :name="item.code">{{ item.name }}</u-radio>
              </u-radio-group>
            </u-form-item>
            <u-form-item label-position="left" label-width="150" label="物流单号" prop="logisticsNumber">
              <u-input :border="true" v-model="logisticsModel.logisticsNumber" maxlength="50" placeholder="请输入物流单号"></u-input>
            </u-form-item>
          </u-form>
          <u-button :custom-style="buttonStyle" :ripple="true"  @click="onLogisticsSubmit">提交</u-button>
        </swiper-item>
      </swiper>
    </u-popup>-->
  </view>
</template>

<script>
import {  goback } from "@/common/utils/navigateBack.js";
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import empty from "@/components/empty";
import {
  errorImgUrl
} from '@/common/utils/config.js';
import {
  getAfterSaleList,
  cancelAftersale,
  logisticsDelivery,
  getAftersaleData
} from '../../api/order/order.js'
import{
  confirmReceipt,
  getLogistics
} from '../../api/aftersale/aftersale.js'
import { dictService } from '@/common/utils/api.js'
import UCol from "../../uview-ui/components/u-col/u-col";
import UPopup from "../../uview-ui/components/u-popup/u-popup";
import UInput from "../../uview-ui/components/u-input/u-input";
import UForm from "../../uview-ui/components/u-form/u-form";
import UFormItem from "../../uview-ui/components/u-form-item/u-form-item";
import UButton from "../../uview-ui/components/u-button/u-button";
import easySelect from "../../components/easy-select/easy-select"
export default {
  components: {
    UButton,
    UFormItem,
    UForm,
    UInput,
    UPopup,
    UCol,
    uniLoadMore,
    empty,
    uniPopup,
    easySelect
  },
  data() {
    return {
      selectLogisticsCompany:'',
      logisticsCompanyList:[],
      page: 1,
      limit: 10,
      errorImgUrl:errorImgUrl,
      logisticsShow:false,
      logisticsModel:{
        logisticsName:'',
        logisticsNumber:''
      },
      logistics:{},
      buttonStyle:{
        border:'#fa436a',
        color:'#fff',
        backgroundColor:'#fa436a',
        margin: '5px auto 5px auto',
      },
      rules:{
        logisticsName:[{
          required: true,
          message: '请输入物流公司名称',
          trigger: 'blur' ,
        }],
        logisticsNumber:[{
          required: true,
          message: '请输入物流单号',
          trigger: 'change' ,
        }],
      },
      errorType: ['message'],
      sn:'',
      afterSaleList: [],
      loadingType: 'more',
      curOrder: {},
      cancelReason:'',
      type: 'center',
      logisticsList:[],
      logTabIndex:0,
      dataDictMap: {'DELIVERY_TYPE':[],'SALE_AFTER_TYPE':[],'SALE_AFTER_STATUS':[],'LOGISTICS_COMPANY':[]},
      dataDictLists: [],
      statusData:{},
	  selectLogisticsCode: ''
    }
  },
  onReady() {
    // this.$nextTick(()=>{
    // 	this.$refs.uForm.setRules(this.rules)
    // })
  },
  onLoad(op) {
    console.log('传值',op)
    dictService(this, ['DELIVERY_TYPE','SALE_AFTER_TYPE','SALE_AFTER_STATUS','LOGISTICS_COMPANY'])
    this.loadData(op.sn);
    // this.getDictData()
    // dictService(this, ['DELIVERY_TYPE','SALE_AFTER_TYPE','SALE_AFTER_STATUS','LOGISTICS_COMPANY'])
    // this.status
    // this.getStateData(op.sn)
  },
  // onReachBottom() {
  //   this.loadData()
  // },
  methods: {
			returnIndex() {
				goback()
			},
    selectOne(options) {
      console.log('xuanz',options)
	  console.log(this.logisticsCompanyList)
      this.selectLogisticsCompany = options.value
	  this.selectLogisticsCode = options.code
    },
    loadData(sn) {
      if (this.loadingType === 'loading') {
        return;
      }
      this.loadingType = 'loading';
      let total = 0;
      let list = [];
      // const param = {
      //   page: this.page,
      //   limit: this.limit,
      //   pageType: 1
      // }
      //type 1 退货 2 换货
      getAftersaleData({
        sn:sn
      }).then(res => {
        console.log('res',res)
        if (res.code === 0) {
          this.afterSaleList= res.data;
          this.logistics = res.data
          let arr = [];
          //  遍历对象的每一个对象
          // this.sn = sn
          // getAftersaleData({sn:sn}).then(res=>{
          //   if (res.code === 0){
          //     this.logistics = res.data
          //   }else{
          //     this.$util.msg('售后单获取失败')
          //   }
          //
          // })
          // this.logisticsCompanyList = []
          // this.dataDictLists.LOGISTICS_COMPANY.forEach((item,index)=>{
          //   this.logisticsCompanyList.push({name:item.name,checked:false,code:item.code})
          // })
          // this.logisticsShow = true
          // this.$nextTick(()=>{
          // 	this.$refs.uForm.setRules(this.rules)
          // })

          // var jsonText = JSON.stringify(res.data);

          // let userData=JSON.stringify(t)
          // console.log('shuzu------------',userData);
          // var jsonText =eval('('+userData+')');
          // console.log('jsonatEXT',jsonText)
          // for (var item in res.data) {
          //   console.log('item',item)
          //   //  map取对象每一个total对应的值取赋值
          //   // res.data.map((i, index) => {
          //     // if (!arr[index]) {
          //     //   arr[index] = [];
          //     // }
          //     // console.log(res.data.item)
          //     // console.log(index)
          //     arr.push( {item:res.data[item]});
          //   // });
          // }
          // console.log('数组',arr)
          // for(let k in res.data){
          //   arr.push(res.data)
          // }
          // console.log(arr)
          // this.afterSaleList=userData
        //   list.forEach(item => {
        //     this.afterSaleList.push(item);
        //   })-
        //   total = parseInt(res.data.total);
        //   if (this.afterSaleList.length === total) {
        //     this.loadingType = 'noMore';
          // } else {
            this.loadingType = 'more';
          // }
        //   this.page++;
        } else {
          this.toast(res.message)
          this.loadingType = 'more';
        }
      })
      this.logisticsCompanyList = []
      this.dataDictLists.LOGISTICS_COMPANY.forEach((item,index)=>{
        this.logisticsCompanyList.push({value:item.name,label:item.name
          ,checked:false,code:item.code
        })
      })
      console.log('物流数组',this.logisticsCompanyList)
      this.logisticsShow = true
      // this.$nextTick(()=>{
      // 	this.$refs.uForm.setRules(this.rules)
      // })
      //     .catch(err => {
      //   console.log(err,'网路异常')
      // })
    },
    toast(msg) {
      uni.showToast({
        title: msg,
        duration: 1200,
        mask: false,
        icon: 'none'
      });
    },
    logisticsPopupShow(sn,id){
      console.log('发货')
      // uni.navigateTo({
      //   url:`pages/deliver/detail`
      // })

      uni.navigateTo({
        url:`/pages/deliver/deliverGood?sn=${sn}`
      })
      // uni.navigateTo({
      //   url:`/pages/deliver/deliver?item=${item}`
      // })
      // this.sn = sn
      // getAftersaleData({sn:sn}).then(res=>{
      //   if (res.code === 0){
      //     this.logistics = res.data
      //   }else{
      //     this.$util.msg('售后单获取失败')
      //   }
      //
      // })
      // this.logisticsCompanyList = []
      // this.dataDictLists.LOGISTICS_COMPANY.forEach((item,index)=>{
      //   this.logisticsCompanyList.push({name:item.name,checked:false,code:item.code})
      // })
      // this.logisticsShow = true
      // this.$nextTick(()=>{
      // 	this.$refs.uForm.setRules(this.rules)
      // })
    },
    submit(){
      this.sn = sn
      getAftersaleData({sn:sn}).then(res=>{
        if (res.code === 0){
          this.logistics = res.data
        }else{
          this.$util.msg('售后单获取失败')
        }

      })
      this.logisticsCompanyList = []
      this.dataDictLists.LOGISTICS_COMPANY.forEach((item,index)=>{
        this.logisticsCompanyList.push({name:item.name,checked:false,code:item.code})
      })
      this.logisticsShow = true
      this.$nextTick(()=>{
      	this.$refs.uForm.setRules(this.rules)
      })
    },
    onLogisticsSubmit(){
      if (this.selectLogisticsCode===''){
        this.$util.msg('请选择物流公司')
        return false
      }
      if (this.logisticsModel.logisticsNumber === ''){
        this.$util.msg('请输入物流单号')
        return false
      }
      let param = {
        sn:this.logistics.sn,
        logisticsNumbers: this.logisticsModel.logisticsNumber,
        logisticsCompany: this.selectLogisticsCode
      }
      logisticsDelivery(this.dataDictMap.LOGISTICS_COMPANY[this.selectLogisticsCode],param).then(res=>{
        console.log('res',res)
        if (res.code === 0){
          this.$util.msg('操作成功')
          // this.page=1
          // this.afterSaleList = []
          // this.logisticsShow = false
          // this.loadData()
          this.returnIndex()
        }else {
          this.$util.message(res.message)
        }
      })
    },
    toDetail(item) {
      console.log('查看')
      let sn = item.sn
      let type=item.type
      console.log('item.type',item.type)
      uni.navigateTo({
        url: `/pages/aftersale/detail?sn=${sn}`
      })
    },
    openPopup(item, type) {
      this.curOrder = item;
      this.service('center', type)
    },
    // 点击确认收货
    beforeConfirm(item){
      // pages/deliver/detail
      console.log('确认收货')
      uni.navigateTo({
        url:`/pages/deliver/deliver?item=${item}`
      })
      // uni.showLoading({
      //   title:'加载中'
      // })
      // const param = {
      //   saleAfterId: item.id
      // }
      // getLogistics(param).then(res => {
      //   uni.hideLoading()
      //   if (res.code === 0){
      //     this.logisticsList = res.data;
      //     if (this.logisticsList.length === 1 && item.status === '10'){
      //       this.openPopup(item,'confirm')
      //     }else {
      //       this.openPopup(item,'log')
      //     }
      //   }
      // })
    },
    // 关闭弹窗
    close(type) {
      this.$refs['show' + type].close();
      this.curOrder={}
      this.cancelReason=''
    },
    service(type, open) {
      this.type = type;
      this.$nextTick(() => {
        this.$refs['show' + open].open();
      })
    },
    // 查看物流
    getLogs(item){
      const param = {
        saleAfterId: item.id
      }
      getLogistics(param).then(res => {
        uni.hideLoading()
        if (res.code === 0){
          this.logisticsList = res.data;
          this.openPopup(item,'log')
        }
      })
    },
    // 确认收货
    confirmReceive(){
      let saleAfterId = this.logisticsList[0].saleAfterId;
      let outgoingCode = this.logisticsList[0].outgoingCode;
      uni.showLoading({
        title: '请稍后',
      })
      const params = {
        saleAfterId: saleAfterId,
        outgoingCode: outgoingCode
      }
      confirmReceipt(params).then(res => {
        if (res.code === 0){
          uni.hideLoading();
          this.$util.msg('确认收货成功!')
          this.curOrder = {}
          this.page=1
          this.afterSaleList = []
          setTimeout( () => {
            this.close('confirm')
          }, 600)
          this.loadData()
        }else {
          this.$util.msg(res.message)
          uni.hideLoading();
        }
      })
    },
    // 取消售后单
    cancelOrder() {
      if(!this.cancelReason){
        this.$util.msg('请填写取消原因！')
        return;
      }
      const params = {
        sn: this.curOrder.sn,
        reason: this.cancelReason,
      }
      cancelAftersale(params).then(res => {
        if(res.code===0){
          this.$util.msg('取消成功')
          this.cancelReason = ''
          this.curOrder = {}
          this.page=1
          this.afterSaleList = []
          this.loadData()
          setTimeout( () => {
            this.close('cancel')
          }, 600)
        }else{
          this.$util.msg(res.message)
        }
      })
    },
  }
}
</script>

<style lang="scss">
@import '@/common/css/uni.css';
page,
.content {
  background: $page-color-base;
  //height: 100%;
}
.product-box {
  flex: 1;
  background-color: #f5f5f5;
  height: 280px;
  .swiper-item{
    padding: 20rpx;
    overflow-y:auto;
  }
}
.order {
  background-color: #ffffff;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;
  .top {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .store {
        margin: 0 10rpx;
        font-size: 32rpx;
        font-weight: bold;
      }
    }

  }
  .item {
    display: flex;
    margin: 20rpx 0 0;
    .left {
      margin-right: 20rpx;
      image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 10rpx;
      }
    }
    .title {
      font-size: 28rpx;
      line-height: 50rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .right {
      margin-left: auto;
      padding-top: 20rpx;
      text-align: right;
      .price{
        color: #fa436a;
      }
      .decimal {
        font-size: 24rpx;
        margin-top: 4rpx;
      }
      .number {
        color: $u-tips-color;
        font-size: 24rpx;
      }
    }

  }
  .totalPrice {
    display: flex;
    justify-content: space-between;
    .combine{
      margin: auto 0 auto;
      .price{
        color: #fa436a;
        display: inline;
      }
    }
  }
  .total {
    color: $font-color-light;
    justify-content: flex-end;
    //margin-top: 10rpx;
    display: flex;
    font-size: 24rpx;
    .num{
      color: $font-color-dark;
    }
    .total-price {
      font-size: 32rpx;
      color: $uni-color-primary;
    }
  }
}
.budget-title{
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  color: #333;
  padding: 15px;
  border-bottom: 1px solid #e9e9e9;
}

.list-scroll-content {
  height: 100%;
}

.time-text {
  font-size: 14px;
  float: left;
  position: absolute;
  left: 5px;
}

.uni-tip {
  overflow: hidden;
  .popup-content {
    .order-info {
      color: #303133;
      margin-bottom: 16rpx;
    }

    .cancel-reason {
      height: 140rpx;
      min-height: 140rpx;
      width: 100%;
      max-height: 200rpx;
      padding: 16rpx;
      color: #303133;
      font-size: 14px;
      border: 1px solid #d9d9d9;
    }
    .ph{
      font-size: 14px;
      color: #666;
    }
  }

  .uni-tip-group-button {
    border-top: none;

    .uni-tip-button {
      border-top: 1px solid #e2e2e2;

      &.confirm {
        border-top: 1rpx solid $base-color;
        border-bottom: 1rpx solid $base-color;
        color: #fff;
        background-color: $base-color;
      }
    }
  }
}

.order-item {
  display: flex;
  flex-direction: column;
  padding: 20upx;
  background: #fff;
  margin: 20upx;

  .i-top {
    display: flex;
    align-items: center;
    height: 80upx;
    padding-right: 20upx;
    font-size: $font-base;
    color: $font-color-dark;
    position: relative;


    .img {
      width: 32upx;
      height: 32upx;
      margin-right: 6upx;
    }

    .time {
      font-weight: bold;
    }

    .state {
      color: $base-color;
      position: absolute;
      right: 25rpx;
    }

    .yticon {
      font-size: 32upx;
      margin-right: 4upx;
      color: #fa436a;
      position: absolute;
      right: 85rpx
    }

    .icon-shouhoutuikuan {
      font-size: 32upx;
    }

    .del-btn {
      padding: 10upx 0 10upx 36upx;
      font-size: $font-lg;
      color: $font-color-light;
      position: relative;

      &:after {
        content: '';
        width: 0;
        height: 30upx;
        border-left: 1px solid $border-color-dark;
        position: absolute;
        left: 20upx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  /* 多条商品 */
  .goods-box {
    height: 160upx;
    padding: 20upx 0;
    white-space: nowrap;

    .goods-item {
      width: 120upx;
      height: 120upx;
      display: inline-block;
      margin-right: 24upx;
    }

    .goods-img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .goods-box-logistic {
    display: flex;
    padding: 20upx 0;
    flex-direction: column;

    .goods-img {
      display: block;
      width: 120upx;
      height: 120upx;
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 0 30upx 0 24upx;
      overflow: hidden;

      .title {
        font-size: $font-base;
        color: $font-color-dark;
        line-height: 1;
      }

      .attr-box {
        font-size: $font-sm + 2upx;
        color: $font-color-light;
        //padding: 40upx 10upx;
        margin-top: 50upx;
      }

      .price {
        font-size: $font-base + 2upx;
        color: $uni-color-primary;

        &:before {
          content: '￥';
          font-size: $font-sm;
          margin: 0 2upx 0 8upx;
        }
      }
    }
  }

  /* 单条商品 */
  .goods-box-single {
    display: flex;
    padding: 20upx 0;
    //flex-direction: column;

    .goods-img {
      display: block;
      width: 120upx;
      height: 120upx;
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 0 30upx 0 24upx;
      overflow: hidden;

      .title {
        font-size: $font-base;
        color: $font-color-dark;
        line-height: 1;
      }

      .attr-box {
        font-size: $font-sm + 2upx;
        color: $font-color-light;
        //padding: 40upx 10upx;
        margin-top: 50upx;
      }

      .price {
        font-size: $font-base + 2upx;
        color: $uni-color-primary;

        &:before {
          content: '￥';
          font-size: $font-sm;
          margin: 0 2upx 0 8upx;
        }
      }
    }
  }

  .price-box {
    align-items: baseline;
    padding: 20upx 30upx;
    font-size: $font-sm + 2upx;
    color: $font-color-light;

    .num {
      margin: 0 8upx;
      color: $font-color-dark;
    }

    .price {
      font-size: $font-lg;
      color: $uni-color-primary;

      &:before {
        content: '￥';
        font-size: $font-sm;
        margin: 0 2upx 0 8upx;
      }
    }
  }

  .action-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: fit-content;
    min-height: 100upx;
    position: relative;
    padding-right: 30upx;
  }

  .action-btn {
    width: fit-content;
    min-width: 150upx;
    height: 60upx;
    display: inline-table;
    margin: 0;
    margin-top: 10upx;
    margin-bottom: 10upx;
    margin-left: 20upx;
    padding: 0 10upx 0 10px;
    text-align: center;
    line-height: 60upx;
    font-size: $font-sm + 2upx;
    color: $font-color-dark;
    background: #fff;
    border-radius: 100px;

    &:after {
      border-radius: 100px;
    }

    &.recom {
      background: #fff9f9;
      color: $base-color;

      &:after {
        border-color: #f7bcc8;
      }
    }
  }
}

/* load-more */
.uni-load-more {
  display: flex;
  flex-direction: row;
  height: 80upx;
  align-items: center;
  justify-content: center
}

.uni-load-more__text {
  font-size: 28upx;
  color: #999
}

.uni-load-more__img {
  height: 24px;
  width: 24px;
  margin-right: 10px
}

.uni-load-more__img>view {
  position: absolute
}

.uni-load-more__img>view view {
  width: 6px;
  height: 2px;
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
  background: #999;
  position: absolute;
  opacity: .2;
  transform-origin: 50%;
  animation: load 1.56s ease infinite
}

.uni-load-more__img>view view:nth-child(1) {
  transform: rotate(90deg);
  top: 2px;
  left: 9px
}

.uni-load-more__img>view view:nth-child(2) {
  transform: rotate(180deg);
  top: 11px;
  right: 0
}

.uni-load-more__img>view view:nth-child(3) {
  transform: rotate(270deg);
  bottom: 2px;
  left: 9px
}

.uni-load-more__img>view view:nth-child(4) {
  top: 11px;
  left: 0
}

.load1,
.load2,
.load3 {
  height: 24px;
  width: 24px
}

.load2 {
  transform: rotate(30deg)
}

.load3 {
  transform: rotate(60deg)
}

.load1 view:nth-child(1) {
  animation-delay: 0s
}

.load2 view:nth-child(1) {
  animation-delay: .13s
}

.load3 view:nth-child(1) {
  animation-delay: .26s
}

.load1 view:nth-child(2) {
  animation-delay: .39s
}

.load2 view:nth-child(2) {
  animation-delay: .52s
}

.load3 view:nth-child(2) {
  animation-delay: .65s
}

.load1 view:nth-child(3) {
  animation-delay: .78s
}

.load2 view:nth-child(3) {
  animation-delay: .91s
}

.load3 view:nth-child(3) {
  animation-delay: 1.04s
}

.load1 view:nth-child(4) {
  animation-delay: 1.17s
}

.load2 view:nth-child(4) {
  animation-delay: 1.3s
}

.load3 view:nth-child(4) {
  animation-delay: 1.43s
}

@-webkit-keyframes load {
  0% {
    opacity: 1
  }

  100% {
    opacity: .2
  }
}
/* 底部栏 */
.action-section {
  /* #ifdef H5 */
  margin-bottom: 0upx;
  /* #endif */
  position: fixed;
  left: 30upx;
  bottom: 30upx;
  z-index: 95;
  display: flex;
  align-items: center;
  width: 690upx;
  height: 100upx;
  padding: 0 30upx;
  color: #FFFFFF;
  background: #1ea143;
  //box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
  border-radius: 16upx;

  .checkbox {
    height: 52upx;
    position: relative;

    image {
      width: 52upx;
      height: 100%;
      position: relative;
      z-index: 5;
    }
  }

  .clear-btn {
    position: absolute;
    left: 26upx;
    top: 0;
    z-index: 4;
    width: 0;
    height: 52upx;
    line-height: 52upx;
    padding-left: 38upx;
    font-size: $font-base;
    color: #fff;
    background: $font-color-disabled;
    border-radius: 0 50px 50px 0;
    opacity: 0;
    transition: .2s;

    &.show {
      opacity: 1;
      width: 120upx;
    }
  }

  .total-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: right;
    padding-right: 40upx;

    .price {
      font-size: $font-base + 4upx;
      color: $uni-color-primary;
    }

    .coupon {
      font-size: $font-sm;
      color: $font-color-light;

      text {
        color: $uni-color-primary;
      }
    }
  }

  .confirm-btn {
    padding: 0 38upx;
    margin: 0;
    border-radius: 100px;
    height: 76upx;
    line-height: 76upx;
    font-size: $font-base + 2upx;
    background: $uni-color-primary;
    box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72)
  }
}
</style>
